import { Button } from 'antd';
import React, { useState, useRef } from 'react';
import { PaginationProps } from 'antd/lib/pagination';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';

import { PatientItem, CityDict, SearchParam } from './data';
import { listPatient } from './service';
import { getQuertParam, exportExcel } from '@/utils/utils';

const User: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const [total, setTotal] = useState<number>();
  const [pagination, setPagination] = useState<PaginationProps>({});
  const [selectRecord, handleSelectRecord] = useState<PatientItem | undefined>(undefined);

  const [searchParam, setSearchParams] = useState<SearchParam>({});

  const columns: ProColumns<PatientItem>[] = [
    {
      title: '序号',
      width: 50,
      align: 'center',
      dataIndex: 'index',
      valueType: 'index',
      render: (text, record, index) => {
        const { current = 1, pageSize = 10 } = pagination;
        return (current - 1) * pageSize + index + 1;
      },
    },
    {
      title: '姓名',
      width: 50,
      align: 'center',
      dataIndex: 'patientName',
      valueType: 'text',
    },
    {
      title: '单位',
      width: 50,
      align: 'center',
      dataIndex: 'lccCode',
      valueType: 'text',
    },
    {
      title: '身份证号',
      width: 50,
      align: 'center',
      dataIndex: 'idNumber',
      valueType: 'text',
    },
    {
      title: '年龄',
      width: 50,
      align: 'center',
      dataIndex: 'age',
      valueType: 'text',
      hideInSearch: true,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      hideInSearch: true,
      align: 'center',
      width: 50,
      render: (text) => {
        if (text === 1) {
          return '男';
        }
        if (text === 2) {
          return '女';
        }
        return '-';
      },
    },
    {
      title: '手机号',
      width: 100,
      align: 'center',
      hideInSearch: true,
      dataIndex: 'phone',
      valueType: 'text',
    },
    {
      title: '地址',
      width: 100,
      align: 'center',
      hideInSearch: true,
      dataIndex: 'addressDetail',
      valueType: 'text',
    },
  ];

  /**
   * 导出
   * @param form
   */
  const handleExport = (form: any) => {
    const url =
      '/api/patient/download?current=' +
      searchParam.current +
      '&pageSize=' +
      searchParam.pageSize +
      '&order=' +
      searchParam.order +
      '&sortParam=' +
      searchParam.sortParam +
      '&param=' +
      JSON.stringify(searchParam.param);

    // 导出
    exportExcel(url);
  };

  return (
    <PageContainer title={false}>
      <ProTable<PatientItem>
        rowKey="id"
        bordered
        columns={columns}
        actionRef={actionRef}
        pagination={{
          total,
          pageSize: 10,
        }}
        toolBarRender={() => []}
        request={(params) => {
          const { current, pageSize, ...data } = params;
          const paramsT = {
            current,
            pageSize,
            order: true,
            sortParam: 'id',
            param: getQuertParam(data),
          };
          //保存查询参数,导出使用
          setSearchParams(paramsT);
          return listPatient(paramsT); // 单独处理查询请求，因为里面含有特殊参数param,含大括号，自动转义
        }}
        postData={(data: any) => {
          setTotal(data.total);
          return data.records || [];
        }}
        search={{
          optionRender: ({ searchText, resetText }, { form }) => [
            <Button
              key="search"
              type="primary"
              onClick={() => {
                form?.submit();
              }}
            >
              {searchText}
            </Button>,
            <Button
              key="rest"
              onClick={() => {
                form?.resetFields();
              }}
            >
              {resetText}
            </Button>,
            <Button key="out" onClick={() => handleExport(form)}>
              导出
            </Button>,
          ],
        }}
      />
    </PageContainer>
  );
};

export default User;
